<template>
  <div class="container" style="min-height: 100%; padding-bottom: 100px;">
    <el-container>
      <el-aside width="300px">
        <el-card class="box-card">

          <template #header>
            <el-avatar :size="250" :src="circleUrl"></el-avatar>
            <div class="clearfix" style="display: flex; flex-direction: column" >
              <div style="font-family: 'Cascadia Code'; font-weight: bold; font-size: 30px">{{"Qiao Ruoyi"}}</div>
              <div style="font-family: 'Cascadia Code' ; font-weight: lighter; font-size: 15px">{{"Nick name"}}</div>
            </div>

            <el-button type="info" @click="onButtonClick" size="large" style="width: 100%; align-content: center">编辑信息</el-button>
          </template>
          <ul class="vcard-details">
            <li class="vcard-detail pt-1 hide-sm hide-md" itemprop="homeLocation" show_title="false" aria-label="Home location: Shanghai"><svg class="octicon octicon-location" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              <span class="p-label">{{"Shanghai"}}</span>
            </li>

            <li itemprop="url" data-test-selector="profile-website-url" class="vcard-detail pt-1 "><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-email">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2A1.75 1.75 0 000 3.75v.736a.75.75 0 000 .027v7.737C0 13.216.784 14 1.75 14h12.5A1.75 1.75 0 0016 12.25v-8.5A1.75 1.75 0 0014.25 2H1.75zM14.5 4.07v-.32a.25.25 0 00-.25-.25H1.75a.25.25 0 00-.25.25v.32L8 7.88l6.5-3.81zm-13 1.74v6.441c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V5.809L8.38 9.397a.75.75 0 01-.76 0L1.5 5.809z"></path></svg></svg>
              <a rel="nofollow me" class="Link--primary"  >{{"dangviet79047@gmail.com"}}</a>
            </li>
          </ul>
        </el-card>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--          -->
            <el-tab-pane label="论文信息" name="first">
              <div style="margin-bottom: 15px">
                <el-button @click="resetDateFilter">清除日期过滤器</el-button>
                <el-button @click="clearFilter">清除所有过滤器</el-button>
              </div>
              <el-table
                  ref="filterTable"
                  :data="tableData"
                  style="width: 100%"
                  border
              >
                <el-table-column
                    prop="date"
                    label="日期"
                    sortable
                    width="180"
                    column-key="date"
                    :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                    :filter-method="filterHandler"
                >
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="论文题目"
                    sortable
                    :formatter="formatter">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="审核状态"
                    width="100"
                    column-key="status"
                    :filters="[{ text: '审核中', value: '审核中' }, { text: '已通过', value: '已通过' }]"
                    :filter-method="filterStatus"
                    >
                    <template #default="scope">
                      <el-tag
                          :type="scope.row.status === '审核中' ? 'primary' : 'success'"
                          disable-transitions>{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>

<!--                <el-table-column-->
<!--                  label="操作"-->
<!--                  prop="address"-->

<!--                >-->

<!--                </el-table-column>-->
                <el-table-column
                    label="操作"
                >
                  <template  #default="scope">
                    <el-button
                        @click="handleEdit(scope.row)">Edit</el-button>
                    <el-button
                        type="danger"
                        @click="handleDelete(scope.row)">Delete</el-button>
                  </template>
                </el-table-column>

              </el-table>
<!--              <div style="margin-top: 10px;">-->
<!--                <el-pagination-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--                    :current-page="currentPage"-->
<!--                    :page-sizes="[10, 20, 50, 100]"-->
<!--                    :page-size="10"-->
<!--                    layout="total, sizes, prev, pager, next, jumper"-->
<!--                    :total="234"-->
<!--                ></el-pagination>-->
<!--              </div>-->
            </el-tab-pane>


            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"
            >定时任务补偿</el-tab-pane
            >
          </el-tabs>
        </el-main>


      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  props: [],
  components: {},
  data() {
    return {
      activeName: "second",
      circleUrl:
          "../src/assets/img/photo.png",
          // "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      currentPage: 1,
      o: "",
      propItem: "",
      propList: [
        {
          label: "论文名称",
          prop: "name",
        },
        {
          label: "提交时间",
          prop: "date",
        },
        {
          label: "审核状态",
          prop: "status",
        },
        {
          label: "动态组件",
          prop: "lc-component",
          component: "el-switch",
        },
      ],
      row: "",
      search: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        status: '审核中'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        status: '审核中'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        status: '已通过'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        status: '已通过'
      }],
    }
  },
  watch: {},
  computed: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  destroyed() {},
  methods: {
    request() {},
    handleClick() {},
    handleCurrentChange() {},
    handleSizeChange() {},
    onButtonClick() {

    },
    hello() {
      alert("来自预设逻辑代码的问候")
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterStatus(value, row) {
      return row.status === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleEdit(row) {
      console.log(row);
    },
    handleDelete( row) {
      console.log(row);
    }
  },
}
</script>

<style scoped>
.box-card{}
.clearfix{}
.demo-form-inline{}
.text{}
.container {  }
.item { margin-top: 10px; margin-right: 40px; }

.vcard-details {
  list-style: none;
}
.vcard-detail {
  padding-left: 24px;
  font-size: 14px;
}
.vcard-detail .octicon {
  float: left;
  width: 16px;
  margin-top: 4px;
  margin-left: -24px;
  color: #21262d;
  text-align: center;
}
a {
  color: #21262d;
  text-decoration: none;
}
li{
  margin-top: 3px;
}
</style>